<script setup lang="ts">

interface Props {
  phone?: string;
}

const props = withDefaults(defineProps<Props>(), {
  phone: () => ''
});

const formattedPhoneNumber = computed(() => {
  // Remove all non-digit characters
  const digits = props.phone.replace(/\D/g, '');

  // Format the phone number as "123 1234 1234"
  if (digits.length <= 3) {
    return digits;
  } else if (digits.length <= 7) {
    return `${digits.slice(0, 3)} ${digits.slice(3)}`;
  } else {
    return `${digits.slice(0, 3)} ${digits.slice(3, 7)} ${digits.slice(7, 11)}`;
  }
});
</script>

<template>
  <span>{{ formattedPhoneNumber }}</span>
</template>

<style scoped lang="scss">

</style>